<template>
  <div class="height_100">
    <page-model  :title="title">
      <menu-nav  :navList="navList" @navClick="navClick" :defaultIndex="defaultIndex"></menu-nav>
      <div class="tableList pl-30 pr-30 pt-25">
        <table border="0" cellspacing="0" cellpadding="0" class="table">
          <thead class="thead">
            <th>序号</th>
            <th>记录编号</th>
            <th>混泥土强度等级</th>
            <th>检测员</th>
            <th>检测时间</th>
            <th>操作</th>
          </thead>
          <tbody v-if="count" class="tbody">
            <tr v-for="(item,index) in tableData" :key="item.safeId">
              <td>{{ index>=9?(index+1):'0'+(index+1)}}</td>
              <td>{{ item.spectrumId }}</td>
              <td>{{ item.spectrumType}}</td>
              <td>{{ item.op }}</td>
              <td>{{ item.createTime }}</td>
              <td class="btnGroup">
                <el-button @click="view(item)" type="text" size="small">查看详情</el-button>
                <el-button
                  @click="show(item.spectrumId)"
                  type="text"
                  size="small"
                  v-if="item.isShow===0"
                >显示</el-button>
                <el-button
                  @click="hide(item.spectrumId)"
                  type="text"
                  size="small"
                  v-if="item.isShow===1"
                >隐藏</el-button>
                <el-button @click="deleteInfo(item)" type="text" size="small" style="color:red">删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="block" v-if="count">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
        <div class="empty" v-if="!count">
          <empty></empty>
        </div>
      </div>
    </page-model>
    <delete-alert-box
      v-if="showDelete"
      :descTips="descTips"
      :isDelete="isDelete"
      @Cancel="Cancel"
      @Confirm="Confirm"
    ></delete-alert-box>
    <el-drawer :visible.sync="drawer" :show-close="false">
      <div class="readDrawer">
        <p class="title">检测信息</p>
        <div class="content">
          <p class="name">
            记录编号：
            <span>{{drawerData.spectrumId}}</span>
          </p>
          <p class="name mt-30">
            混凝土强度等级：
            <span>{{drawerData.spectrumType}}</span>
          </p>
          <p class="name mt-30">
            检测员：
            <span>{{drawerData.op}}</span>
          </p>
          <p class="name mt-30">
            检测时间：
            <span>{{drawerData.createTime}}</span>
          </p>
        </div>
        <p class="title mt-40">检测数据</p>
        <div class="spectrumDataList">
          <table border="0" cellspacing="0" cellpadding="0" class="table">
            <thead class="thead">
              <th>成分</th>
              <th>简称</th>
              <th>Rir</th>
              <th>Unc</th>
              <th>Mu/rho</th>
              <th>Xtal</th>
              <th>Xtal-A</th>
            </thead>
            <tbody class="tbody">
              <tr v-for="item in spectrumData" :key="item.phase">
                <td>{{ item.phase}}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.rir}}</td>
                <td>{{ item.unc}}</td>
                <td>{{ item.mu }}</td>
                <td>{{ item.xtal }}</td>
                <td>{{ item.xtal_a }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { updateIsShow } from '@/api/innerProject/spectrumScan'
export default {
  data () {
    return {
      title: '建材检测',
      navList: [
        {
          name: '检测数据'
        },
        {
          name: '已隐藏'
        }
      ],
      defaultIndex: 0,
      currentPage: 1,
      pageIndex: 1,
      pageSize: 10,
      isShow: 1,
      descTips: null,
      itemId: '',
      showDelete: false,
      isDelete: false,
      drawer: false,
      drawerData: {},
      spectrumData: []
    }
  },
  computed: {
    ...mapState('spectrumScan', ['tableData', 'count'])
  },
  methods: {
    navClick (index) {
      this.defaultIndex = index
      this.isShow = index === 0 ? 1 : 0
      this.getTable()
    },
    getTable () {
      const params = {
        index: this.pageIndex,
        pageSize: this.pageSize,
        isShow: this.isShow
      }
      this.$store.dispatch('spectrumScan/updateTableList', params)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.pageIndex = val
      this.getTable()
    },
    view (item) {
      this.drawerData = item
      this.spectrumData = JSON.parse(item.spectrumData)
      this.drawer = true
    },
    show (spectrumId) {
      updateIsShow(1, spectrumId).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getTable()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    hide (spectrumId) {
      updateIsShow(0, spectrumId).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getTable()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    deleteInfo (item) {
      this.itemId = item.spectrumId
      this.descTips = [
        {
          tips: `确定删除"${item.spectrumId}"光谱扫描记录？`
        }
      ]
      this.isDelete = true
      this.showDelete = true
    },
    Cancel () {
      this.showDelete = false
    },
    Confirm () {
      this.$store
        .dispatch('spectrumScan/deleteItem', { spectrumId: this.itemId })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 500
            })
            this.showDelete = false
            this.getTable()
          }
        })
    }
  },
  mounted () {
    this.getTable()
  }
}
</script>
<style scoped lang="scss">
.tableList {
  border-top: 1px solid #e4e7ed;
  position: relative;
  overflow: hidden;
  min-height: calc(100% - 154px);
  background-color: #fff;
  .table {
    width: 100%;
    .thead {
        font-weight: 500;
        font-size: 14px;
        background: rgba(87, 131, 255, 0.05);
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
    .tbody {
      height: calc(100% - 60px);
      tr {
        height: 64px;
        td {
          max-width: 200px;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          padding-left: 24px;
          border-bottom: rgba(242, 242, 242, 1) 1px solid;
          font-size: 0.11667rem;
          color: #666666;
        }
        .btnGroup {
          button {
            color: #4868ff;
            text-decoration: underline;
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
  }
  .empty {
    height: 600px;
  }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination{
        float: right;
      }
    }
}
::v-deep .el-drawer__header {
  padding: 0;
  margin-bottom: 57px;
}
::v-deep .el-drawer__open .el-drawer.rtl {
  width: 62.5% !important;
}
::v-deep .el-drawer__body .readDrawer {
  .title {
    height: 48px;
    padding-left: 24px;
    line-height: 48px;
    background: rgba(87, 131, 255, 0.05);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  .content {
    padding-left: 110px;
    padding-top: 48px;
    .name {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 22px;
      span {
        width: 346px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .spectrumDataList {
    padding: 40px 60px;
    .table {
      width: 100%;
      .thead {
        background: #f8f8f8;
        th {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid #e6e6e6;
          font-size: 0.11667rem;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
      }
      .tbody {
        tr {
          height: 50px;
          td {
            width: 154px;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: center;
            border: rgba(242, 242, 242, 1) 1px solid;
            font-size: 0.11667rem;
          }
        }
      }
    }
  }
}
</style>
